import { store } from '@/store'

import { defineStore } from 'pinia'

const useThemeStore = defineStore('theme', () => {
  // const theme = ref('light')
  const theme = useStorage('theme', 'light')

  const toggle = (val: string) => (theme.value = val)

  watch(
    theme,
    (newVal, oldVal) => {
      console.log('newVal', newVal)

      document.querySelector('html')?.classList.remove(oldVal)
      document.querySelector('html')?.classList.add(newVal)
    },
    { immediate: true }
  )

  return { theme, toggle }
})

export function useThemeStoreHook() {
  return useThemeStore(store)
}
